<template>
  <div class="container">
    <Modal :width="900" v-model="showDalog" title="题目预览" :mask-closable="false" :closable="false" :footer-hide="true">
      <div class="waper">
        <!-- 学科详情 -->
        <div>
          <Row type="flex" justify="space-around" style="font-size: 16px; margin-bottom: 15px">
            <Col span="6"> 【题型】：{{ dataObj.questionType }} </Col>
            <Col span="6"> 【编号】：{{ dataObj.catalogID }} </Col>
            <Col span="6"> 【难度】：{{ dataObj.difficulty }} </Col>
            <Col span="6"> 【标签】：{{ dataObj.tags }} </Col>
          </Row>
          <Row type="flex" justify="space-around" style="font-size: 16px; margin-bottom: 15px">
            <Col span="6"> 【学科】：{{ dataObj.subject }} </Col>
            <Col span="6"> 【目录】：{{ dataObj.catalog }} </Col>
            <Col span="6"> 【方向】：{{ dataObj.direction }} </Col>
            <Col span="6"> </Col>
          </Row>
          <hr />
        </div>
        <!-- 题干 -->
        <div>
          <p style="margin: 10px 0; font-size: 16px">
            【题干】： <span style="color: #2138ff">{{ dataObj.question }}</span>
          </p>
        </div>
        <!-- 选项提示 -->
        <p>{{ isTitle + '题' }} 选项: (以下选中为正确答案)</p>
        <!--  单选 -->
        <div v-if="isRadio === '1'">
          <RadioGroup v-model="oneAnswer" vertical>
            <Radio :label="item.code" v-for="item in answerList" :key="item.id" :disabled="item.code !== oneAnswer">
              <span>{{ item.code  + '-------'}}</span>
              <Icon type="social-apple"></Icon>
              <span>{{ item.title }}</span>
            </Radio>
          </RadioGroup>
        </div>
        <!-- 多选 -->
        <div v-else>
          <CheckboxGroup v-model="answers">
            <Checkbox :label="item.title" v-for="item in answerList" :disabled="answers.indexOf(item.title) ==-1" :key="item.id" style="display:block;padding:5px"></Checkbox>
          </CheckboxGroup>
        </div>
        <!-- 分割 -->
        <hr/>
        <!-- 参考答案 -->
        <div style="margin:10px 0;display:flex; align-items: center; ">【参考答案】:  <Button v-show="isvideo" type="success" style="margin-left:10px" @click="showVideo">视频答案预览</Button></div>
        <!--  视频标签 -->
        <div style="width:400px" >
          <video :src="isVideo"  controls="controls" v-if="isShowVideo" style="width:100%"></video>
        </div>
        <!-- 答案解析 -->
        <hr>
        <div style="margin:10px 0;display:flex; align-items: center; ">【答案解析】: <span v-html="answer"></span></div>
        <!-- 答案备注 -->
        <hr>
        <div style="margin:10px 0;display:flex; align-items: center; ">【题目备注】:  <span> {{ remarks }}</span></div>
      </div>
      <Row type="flex" justify="end" align="middle" style="margin-top:20px;margin-right:10px">
        <Button type="primary" @click="cloes">关闭</Button>
      </Row>
    </Modal>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
export default {
  data () {
    return {
      dataObj: {
        question: '', // 题干
        catalogID: '', // 编号
        subjectName: '', // 学科
        directoryName: '', // 目录
        difficulty: '', // 难度
        direction: '', // 方向
        tags: '' // 标签
      },
      isShowVideo: false, // 是否显示 video 标签
      answer: '', // 答案解析
      remarks: '', // 题目备注
      isVideo: '', // 判断是否有 视频解析地址
      isRadio: '', // 判断是多选还是单选
      answerList: [], // 答案列表
      oneAnswer: '', // 答案单选
      answers: [] // 答案多选
    }
  },
  props: {
    showDalog: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    isTitle () {
      if (this.isRadio === '1') {
        return '单选'
      } else if (this.isRadio === '2') {
        return '多选'
      } else {
        return '简答'
      }
    },
    isvideo () {
      return !!this.isVideo
    }
  },
  methods: {
    async updateObj (obj) { // 渲染展示面板
      this.dataObj = obj
      const { data } = await detail(obj)
      this.dataObj.tags = data.tags // 标签
      this.isRadio = data.questionType // 单选还是多选
      this.answer = data.answer// 答案解析
      this.remarks = data.remarks// 题目备注
      this.isVideo = data.videoURL
      data.options.forEach((item) => {
        if (data.questionType === '1') {
          if (item.isRight === 1) {
            this.oneAnswer = item.code
          }
        } else {
          if (item.isRight === 1) {
            this.answers.push(item.title)
          }
        }
      })
      this.answerList = data.options // 所有答案列表
    },
    // 显示 视频标签
    showVideo () {
      this.isShowVideo = true
    },
    cloes () {
      this.$emit('update:showDalog', false)
      this.isShowVideo = false
    }
  }
}
</script>

<style scoped>
.ivu-modal-header {
  background-color: red;
}
.waper {
  width: 100%;
  /* height: 400px; */
  padding: 10;
}
</style>
